<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件修饰符</title>
    <script src="./lib/vue-2.6.12.js"></script>
    <style>
        .inner {
          line-height: 100px;
          background-color: aliceblue;
          font-size: 13px;
          text-align: center;
        }
    
        .outer {
          background-color: bisque;
          padding: 50px;
          font-size: 13px;
        }
    
        .box {
          background-color: coral;
          padding: 50px;
        }
      </style>
</head>
<body>
    <!-- 在页面中声明一个将要被vue所控制的Dom区域 -->
    <div id="app">

        <!-- .prevent事件修饰符：阻止默认行为，阻止a链接的跳转，阻止表单的提交 -->
        <!-- <h4>①：.prevent事件修饰符的应用场景</h4>
        <a href="http://www.baidu.com" @click.prevent="onLinkClick">百度首页</a>
        <hr> -->

        <!-- .stop修饰符：阻止事件冒泡，不允许事件往大的盒子进行执行 -->
        <!-- <h4>②：.stop事件修饰符的应用场景</h4>
        <div class="outer" @click="onOuterClick">
            外层的div
            <div class="inner" @click="onInnerClick">内部的div</div>
        </div>
        <hr> -->

        <!-- .capture事件修饰符：已捕获模式触发当前的事件处理函数 -->
        <!-- <h4>③：.capture事件修饰符的应用场景</h4>
        <div class="outer" @click.capture="onOuterClick">
            外层的div
            <div class="inner" @click="onInnerClick">内部的div</div>
        </div>
        <hr> -->

        <!-- .once事件修饰符：绑定的事件只触发一次 -->
        <!-- <h4>④.once事件修饰符的应用场景</h4>
        <div class="inner" @click.once="onInnerClick">内部的div</div>
        <hr> -->

        <!-- .self事件修饰符:只有在event.target是当前元素自身的时候触发事件处理函数 -->
        <!-- 也只有点击自身对应的盒子采取执行对应的函数 -->
        <h4>⑤.self事件修饰符的应用场景</h4>
        <div class="box" @click="onBoxClick">
            最外层的box
            <div class="outer" @click.self="onOuterClick">
                中间的div
                <div class="inner" @click="onInnerClick">内部的div</div>
            </div>
        </div>
        <hr>

    </div>
</body>
<script>
    const vm=new Vue({
        el:"#app",
        // 声明处理函数的节点
        methods: {
            // 超链接的点击事件处理函数
            onLinkClick(){
                alert('ok');
            },
            // 点击了外层的div
            onOuterClick(){
                console.log("触发了outer的click事件处理函数");
            },
            // 点击了内部的div
            onInnerClick(){
                console.log("触发了inner的click事件处理函数");
            },
            onBoxClick(){
                console.log('触发了box的click事件处理函数');
            }
        },
    })
</script>
</html>